<!DOCTYPE html>
<!-- saved from url=(0052)https://getbootstrap.com/docs/4.0/examples/checkout/ -->
<html lang="en">

<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../static/images/i-nice-logo.svg">

    <title>Dataset Details</title>
    <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/checkout/">

    <!-- Bootstrap core CSS -->
    <link href="../static/running_config/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
      <link href="../static/running_config/form-validation.css" rel="stylesheet">
     <link href="../static/css/main.css" rel="stylesheet">
     <script src="../static/js/5ec65ef964.js"></script>
    <style>




    </style>

  </head>
  <script src="./static/running_config/jquery-3.5.1.js"></script>
  <body class="bg-light">

    <div class="all-content">
        <!-- sidebar links left -->
        <div class="sidebar">
            <h2><img src="../static/images/i-nice-logo.svg" height="100px"></h2>
            <ul>
                 <li><a href=""><i class="fas fa-home"></i>Home</a></li>
                <li><a href="{{ url_for('ac.running_config') }}"><i class="fas fa-flask"></i>Configurations</a></li>
                <li style="background: #C88D33"><a><i class="fas fa-chart-bar"></i>Dataset Details</a></li>
                <li><a id="sidebarresult"><i class="fas fa-tree"></i>Results</a></li>
                <li><a href="{{ url_for('ac.show_config') }}"><i class="fas fa-flask"></i>Simple Configurations</a></li>
                <li><a id="sidebarsimre"><i class="fas fa-flask"></i>Simple Results </a></li>
            </ul>

            <!-- sidebar links footer tag starts here -->
            <div class="footer_tag">
                <a href="">Copyright Inice visualization 2020</a>

                <!-- sidebar links footer tag ends here -->
            </div>


            <!-- sidebar links left tag ends here -->
        </div>
        <div class="main-content">
            <!-- top welcome message -->
            <div class="header">
                <h1 align="center">
                    Welcome to Inice Visualization Platform
                </h1>

                <p align="right" style="margin-right: 30px;">
                    <a href="logout">logout</a>
                </p>

            </div>

<!--            <div class="infoUp">-->
<!--                <h4>Configuration Name: <input type="text" name="" id="configNameInput" > </h4>-->
<!--            </div>-->

            <div class="info">


              <div class="info2" style="background: white;">



<!--==============================================================================================  -->
      <div class="row">
        <div class="col-md-12 order-md-1">
          <!-- <h4 class="mb-3">Billing address</h4> -->
          <form class="needs-validation" novalidate="" method="POST" onkeypress="return event.keyCode != 13;">
            <div class="row">
              <div class="col-md-12 mb-3">
                <h4 class="mb-3">Description</h4>
                <input type="text" class="form-control" name="description" id="description" value="{{detailDict['description']}}" disabled="disabled">
              </div>
            </div>
<!--================================================================================SUMMARY OF DATASET -->
              <h4 class="mb-3">Summary of dataset:&nbsp;&nbsp; {{detailDict['name']}}</h4>

            <table id="summary_of_dataset" style="margin-bottom: 20px">
                <tr>
                    <td>Class Name:</td>
                    <td ><h7 id="className">{{detailDict['className']}}</h7></td>
                </tr>
                <tr>
                    <td>Number of Rows:</td>
                    <td ><h7 id="nRows">{{detailDict['nRows']}}</h7></td>
                </tr>
                <tr>
                    <td>Number of columns:</td>
                    <td ><h7 id="nCols">{{detailDict['nCols']}}</h7></td>
                </tr>
                <tr>
                    <td>Number of clusters</td>
                    <td ><h7 id="nClusters">{{detailDict['numOfClusters']}}</h7></td>
                </tr>
{#                <tr>#}
{#                    <td>Estimated Clusters Accuracy:</td>#}
{#                    <td><h7 id="accuracy"></h7></td>#}
{#                </tr>#}

                <!-- End of Data summary table-->
            </table>

         <!-- <hr class="mb-4"> -->
<!--============================================================================Parameters of mixture distribution -->
            {% if detailDict['className'] == 'MixedGaussianDataset' %}
            <div id="paraMix">
            <h4 class="mb-3">Parameters of mixture distribution</h4>
            <div class="mb-3">
              <label>Means:</label>
              <table border="0">
                <tbody>
                {% for mean_v in paraDetail['meanList'] %}
                <tr>
                  {% for i in mean_v %}
                  <td>{{ i }}</td>
                  {% endfor %}
                </tr>
                {% endfor %}
                </tbody>
              </table>
            </div>

            <div class="mb-3">
              <p>Covariance matrix: the
                <input type="number" value="1" min="1" step="1" max="{{ detailDict['numOfClusters'] }}" name="clusterId" id="clusterId" style="height:25px;width:45px;">
                -th cluster
              </p>
              <table border="1">
                <tbody id="covMat"></tbody>
              </table>
              <script>
              $("#sidebarresult").click(function () {
                  var old_sideresult = document.getElementById("sidebarresult");
                  if(old_sideresult.href==""){
                      alert("Please run config first!")
                  }
              });
              $("#sidebarsimre").click(function () {
                  var old_sidesimre = document.getElementById("sidebarsimre");
                  if(old_sidesimre.href==""){
                      alert("Please enter the page via simple config!")
                  }
              });
              $('#clusterId').on('change', function(){
                $.ajax({
                      type:"POST",
                      url:"/dataset_detail",
                      dataType:"json",
                      data:{
                        "clusterId": $(this).val(),
                        "id": {{ detailDict['id'] }}
                      },
                      success:function(data){
                        $("#covMat").empty();
                        for(var i=0; i<{{ detailDict['nCols'] }}; i++) {

                            var tr = document.createElement("tr");

                            for(var j=0; j<{{ detailDict['nCols'] }}; j++) {
                                var td = document.createElement("td")
                                td.innerHTML = data['covMat'][i][j]
                                tr.appendChild(td)
                            }

                            var tbody = document.getElementById("covMat");
                            tbody.appendChild(tr);
                        }
                      },
                      error:function(jqXHR){
                          alert("Error")
                      }
                      });
              })
                $('#clusterId').change()
              </script>
            </div>
            </div>
          <!--  <hr class="mb-4"> -->
            {% endif %}
<!--=================================================================================-->
            <h4 class="mb-3">True Centers</h4>
            <div class="mb-3">
              <table border="0" id="result_true_centers">
                <tbody>
                {% for rows in trueCenters %}
                <tr>
                  <th>#</th>
                  {% for i in rows %}
                  <td>{{ i }}</td>
                  {% endfor %}
                </tr>
                {% endfor %}
                </tbody>
              </table>
            </div>
<!--=================================================================================-->

{#            <div id="view_of_dataset">#}
              <div>
                <h4 class="mb-3">Two dimensional view of the dataset:</h4>
            <div id="datasetView" style="width: 800px;height:600px;"></div>
            <a id="download_datasetView" href="">download</a>
            </div>
            <script type="text/javascript">
               $('#download_datasetView').on('click', function(){
                divBlock = document.getElementById('datasetView');
                content = divBlock.querySelector('svg').outerHTML;
                blob= new Blob([content], {type: 'xml/svg'});
                $(this).attr("href", URL.createObjectURL(blob));
                $(this).attr("download", 'datasetView.svg');
                })
            </script>
            <script src="./static/running_config/echarts.min.js"></script>
            <script type="text/javascript">
                var myChart = echarts.init(document.querySelector('#datasetView'), null, {renderer: 'svg'});
                var trueCenters_2d = {{ trueCenters_2d }};
                var dataset_2d = {{ dataset_2d }};
                option = {
                    title: {
                        text: '',
                        subtext: ''
                    },
                    grid: {
                        left: '3%',
                        right: '7%',
                        bottom: '3%',
                        containLabel: true
                    },
                    tooltip: {
                        // trigger: 'axis',
                        confine: true,
                        showDelay: 0,
                        formatter: function (params) {
                          return params.seriesName + ' | id: ' + (params.dataIndex+1) + ' record: '+ params.value;
                        },
                        axisPointer: {
                            show: true,
                            type: 'cross',
                            lineStyle: {
                                type: 'dashed',
                                width: 1
                            }
                        }
                    },
                    xAxis: [
                        {
                            show: true,
                            type: 'value',
                            scale: true,
                            splitLine: {
                                show: false
                            }
                        }
                    ],
                    yAxis: [
                        {
                            show: true,
                            type: 'value',
                            scale: true,
                            splitLine: {
                                show: false
                            }
                        }
                    ],
                    series: [
                    {
                        name: 'dataset_2d',
                        type: 'scatter',
                        data: dataset_2d,
                        color: 'green',
                        symbolSize: 5
                    },
                    {
                        name: 'trueCenters_2d',
                        type: 'scatter',
                        symbol: 'pin' ,
                        symbolSize: 25,
                        data: trueCenters_2d,
                        itemStyle: {
                            normal: {
                                color: '#f10c00',
                                label:{
                                    normal:{
                                        show:true,
                                        formatter:function(params){
                                            return params.name
                                        },
                                        lineHeight: 20,
                                        backgroundColor:'rgba(255,255,255,.9)',
                                        borderColor:'#80cffd',
                                        borderWidth:'1',
                                        padding:[5,15,4],
                                        color:'#000000',
                                        fontSize: 14,
                                        fontWeight:'normal'
                                    }
                                }
                            }
                        }
                    },
                    ]
                };
                myChart.setOption(option);
                </script>
<!--================================================================================-->
           <!-- <hr class="mb-4"> -->
            <h4 class="mb-3">Records of the dataset:</h4>
            <div class="mb-3">
              <table class="myTable" border="0">
                <tbody>
                {% for i in range(detailDict['nRows']) %}
                <tr>
                  <th style="width: 60px">#{{ i+1 }}</th>
                  {% for j in range(detailDict['nCols']) %}
                  <td>{{ dataset[i][j] }}</td>
                  {% endfor %}
                </tr>
                {% endfor %}
                </tbody>
              </table>
            </div>
          </form>
        </div>
      </div>

      <footer class="my-5 pt-5 text-muted text-center text-small">
        <p class="mb-1">© Copyright-2020 Big Data Institute Shenzhen University</p>
        <ul class="list-inline">
          <li class="list-inline-item"><a href="">Privacy</a></li>
          <li class="list-inline-item"><a href="">Terms</a></li>
          <li class="list-inline-item"><a href="">Support</a></li>
        </ul>
      </footer>
    </div>
              </div>
            </div>
 </div>
    </div>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
<!--    <script src="./static/running_config/jquery-3.2.1.slim.min.js.download" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>-->
<!--    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>-->
    <script src="./static/running_config/popper.min.js.download"></script>
    <script src="./static/running_config/bootstrap.min.js.download"></script>
    <script src="./static/running_config/holder.min.js.download"></script>
    <script>
      // Example starter JavaScript for disabling form submissions if there are invalid fields
      (function() {
        'use strict';

        window.addEventListener('load', function() {
          // Fetch all the forms we want to apply custom Bootstrap validation styles to
          var forms = document.getElementsByClassName('needs-validation');

          // Loop over them and prevent submission
          var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
              if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
              }
              form.classList.add('was-validated');
            }, false);
          });
        }, false);
      })();
    </script>


  <style>
    .tb_button {padding:1px;cursor:pointer;border-right: 1px solid #8b8b8b;border-left: 1px solid #FFF;border-bottom: 1px solid #fff;}
    .tb_button.hover {borer:2px outset #def; background-color: #f8f8f8 !important;}
    .ws_toolbar {z-index:100000}
    .ws_toolbar .ws_tb_btn {cursor:pointer;border:1px solid #555;padding:3px}
    .tb_highlight{background-color:yellow}
    .tb_hide {visibility:hidden}
    .ws_toolbar img {padding:2px;margin:0px}
  </style>
  </body>
</html>